<template>
  <div>
    <!-- 产品缺陷分析报表 -->
    <div class="produce_content">
      <div class="produce_top">
        <el-form class="table_serch">
          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">线体</div>
              <Linedrpdown @change="onchange" :linedroplist="linedroplist" :formInline="formInline"></Linedrpdown>
          </div>

          <div class="table_serch_labe" style="margin-left: 40px">
            <div class="table_serch_labe_title">设备</div>
                <el-select
                      v-model="formInline.site"
                      clearable
                      size="mini"
                      style="margin-left: 5px; margin-top: 8px; width: 140px"
                      placeholder="请选择内容"
                    >
                      <el-option
                        v-for="(item, index) in this.siteItems"
                        :key="index"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                 </el-select>
          </div>
           
           <div class="table_serch_labe" style="margin-left: 15px">
          <div class="table_serch_labe_title">起始日期</div>
          <el-form-item label="">
           <StartTime :formInline="formInline"></StartTime>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 15px">
          <div class="table_serch_labe_title">结束日期</div>
          <el-form-item label="">
            <Endtime  :formInline="formInline"></Endtime>
          </el-form-item>
        </div>

          <div class="table_serch_labe" style="margin-left: 40px">
            <div class="table_serch_labe_title">产品ID</div>
            <el-form-item label="">
              <el-autocomplete
                class="product"
                size="mini"
                popper-class="my-autocomplete"
                style="margin-left: 10px; width: 140px"
                v-model="formInline.pannalid"
                @input="(e) => (formInline.pannalid = validForbid(e))"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              >
                <i
                  class="el-icon-edit el-input__icon"
                  slot="suffix"
                  @click="handleIconClick"
                >
                </i>
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                  <span class="addr">{{ item.address }}</span>
                </template>
              </el-autocomplete>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 70px">
            <el-button
              type="primary"
              size="mini"
              style="height: 30px; margin-top: 6px"
              @click="productanalysis"
              >查询</el-button
            >
          
          </div>
        </el-form>
      </div>
      <!--头部表格 :cell-style="isClity"-->
      <div class="table_top">
        <div style="padding: 10px; font-size: 12px">产品缺陷统计</div>
        <el-table
          :data="this.tablelist"
          border
          :cell-style="rowClass"
          :header-cell-style="headClass"
          size="small"
          style="font-size: 10px"
          :show-header="true"
        >
          <el-table-column
            v-for="(item, index) in this.listdata[0]"
            :key="index"
            :label="item"
            :prop="item"
          >
            <template slot-scope="scope">
              <span v-html="showDate(scope.row[item])"></span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 图像显示部分 -->
      <div class="produce_hader">
        <div class="hader_title">
          <!-- <div>定位图像</div>
          <div style="display: flex">
            <div style="margin-left: 10px">画面</div>
            <div style="margin-left: 10px">
              <el-select
                v-model="value"
                @change="onclickcheng"
                placeholder="请选择"
                style="width: 120px; height: 40px"
              >
                <el-option
                  v-for="item in listitems"
                  :key="item.value"
                  :label="item.value"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </div>
          </div> -->
          <div>局部缺陷图像</div>
          <div style="display: flex">
            <div class="s1">站点</div>
            <div style="margin-left: 10px">
              <el-select
                v-model="val"
                @change="onchangei"
                style="width: 120px; height: 40px; margin-top: 5px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.dev"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>

        <div class="produce_hader_img">
          <div class="produce_hader_left">
            <div v-for="(item, index) in imgitems" :key="index">
              <img
                :src="item"
                alt=""
                v-show="item.isshow"
                class="produce_hader_left_img"
              />
            </div>
          </div>

          <div class="produce_hader_right">
            <div
              class="produce_hader_item_img"
              v-for="(item, index) in imgitems"
              :key="index"
            >
              <img :src="item" alt="" style="width: 100%; height: 100%" />
            </div>
          </div>
        </div>
      </div>

      <!-- t图表-->
      <div class="hader_myspl">
        <!-- <div id="my_svg"></div> -->
      </div>

      <!-- 表格 1-->
      <div class="produce_table">
        <div style="padding: 5px; font-size: 12px">站点信息统计</div>
        <div class="hader_table">
          <el-table :data="this.tabledata"
          :header-cell-style="headClass"
           border style="width: 100%">
            <el-table-column prop="Code" label="Code"> </el-table-column>
            <el-table-column prop="X" label="x(cm)"> </el-table-column>
            <el-table-column prop="Y" label="y(cm)"> </el-table-column>
            <el-table-column prop="Pat" label="Pat"> </el-table-column>
            <el-table-column prop="Area" label="Area"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

   

    <Popup
      v-show="Popup_show"
      @ClosePopup="ClosePopup"
      @cancelget="cancelget"
      :timer="timer"
    ></Popup>
    <!-- <About></About> -->
  </div>
</template>
<script>

import Linedrpdown from '../../../components/Linedropdown/Linedropdown'
// import Ariplandown from '../../../components/Airplandown/Airplandown'
import Endtime from '../../../components/endTime/Endtime'
import StartTime from '../../../components/StarTime/StartTime'
import axios from "axios";
import Popup from "../../Pop-up/Pop-up";
export default {
  components: { 
  Popup,
  StartTime,
  Endtime,
  // Ariplandown,
  Linedrpdown},
  data() {
    return {
      tatleshow: false,
      Popup_show: false,
      tableitem: "undefined",
      value: "",
      val: "",
      timer: 0,
      valtimer: "",
      isshow: false,
      search: "NG",
      items: [],
      tablelist: [],
      options: [],
      listitems: [],
      listimg: [],
      picimg: "",
      parimg: [],
      formInline: {
        recipe: "",
        line: "",
        site: "",
        order: "",
        encoder: "",
        starttime:'',
        endtime:'',
        pannalid: "",
      },
      restaurants: [],
      alysisen: [],
      ABI: "",
      Result: "",
      DOA: "",
      EAC: "",
      AFI: "",
      Class: "",
      tabledata: [],
      imgitems: [],
      listdata: [],
      modlulist:[],
       linedroplist:[],
      sitedrwn:[],
      siteItems:[],
      obj: {
        name: "暂无数据",
        path: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgl.baidu.com%2Fgonglve%2Fapi%2Fgetcontent%3Fdoc_id%3Dd58817dca8956bec0875e315%26type%3Dpic%26src%3Dcover.jpg&refer=http%3A%2F%2Fgl.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619321977&t=e3ffff635170bed61c7c63b06a4d9fc8",
      },
    };
  },
  computed: {
    tables: function () {
      var val = this.search;
      if (val) {
        return this.items.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key].toLowerCase().indexOf(val) > -1);
          });
        });
      }
      return this.items;
    },
  },
  created() {},
  mounted() {
    this.getModelnolist()
  },

  methods: {

   onchange() {
      this.siteItems = [];
      this.sitedrwn.forEach((ele) => {
        if (ele.ID.includes(this.formInline.line)) {
          this.siteItems.push(ele.ID);
        }
      });
    },

       getModelnolist(){
        this.ajax(`func/1023/selProductList`).then((res)=>{
          if(res.status == 200){
             this.modlulist = res.data.product;
              this.linedroplist = res.data.line;
             this.sitedrwn = res.data.eqp;
          }
        })
      },


    ///判断每个名字给不同名字添加不同的数组渲染页面
    onchangei() {
      // console.log('1111111111111111',this.options)
      var imgList;
      let contlist = [];
        if(this.picimg){
          for (let i = 0; i < this.picimg.length; i++) {
          // console.log('有数据')
           imgList=this.picimg[i];
           this.imggetlist(imgList);
          }
        }else{
          console.log('没有数据')
          return 
      }
      // this.options.errorPic = [];
      // console.log('22222222222222222222为空')
      this.options.forEach((ele) => {
        if (this.val == ele.dev) {
          contlist = ele;
          this.tabledata = contlist.con;
        }
      });
       this.val=null;
    },

    onclickcheng() {
      //切换画面
      this.listitems.forEach((ele) => {
        if (ele.name == this.value) {
          ele.isshow = true;
        } else {
          ele.isshow = false;
        }
      });
    },

    //查询数据请求
    productanalysis() {
      if (this.formInline.starttime == "") {
        this.$message({
          showClose: true,
          message: "起始日期不能为空",
          type: "warning",
        });
      }else if(this.formInline.endtime == ""){
          this.$message({
          showClose: true,
          message: "结束日期不能为空",
          type: "warning",
        });
      }else if (this.formInline.pannalid == "") {
         this.$message({
          showClose: true,
          message: "产品id不能为空",
          type: "warning",
        });
      } else {
        const CancelToken = axios.CancelToken;
        this.ajax({
          url: `prod/1002?&recipe=${this.formInline.recipe}&line=${this.formInline.line}&site=${this.formInline.site}&order=${this.formInline.order}&pannalid=${this.formInline.pannalid}&encoder=${this.formInline.encoder}&starttime=${this.formInline.starttime}&endtime=${this.formInline.endtime}`,
          method: "GET",
          cancelToken: new CancelToken((c) => {
            this.cancel = c;
          }),
        }).then((res) => {
          var reult = res.data;
          // var tisv = this;
          console.log("///////////////////////", reult);
          if (reult) {
            this.tablelist = [];
            this.alysisen = reult;
            this.options = [];

            setTimeout(() => {
              //判断是否有数据 显示提示框
              if (this.alysisen.length == "") {
                this.Popup_show = true;
                this.Popup_timer = setInterval(() => {
                  this.timer++;
                }, 1000);
              } else {
                return;
              }
            }, 25000);

            // console.log(this.alysisen);
            this.listdata = this.alysisen.table1;
            this.options = this.alysisen.table2;
            for(let i=0; i<this.options.length; i++){
                this.picimg = this.options[i].errorPic;
            }
            // console.log(this.picimg);

            if (this.listdata) {
              this.Tabudataparsing();
            }

          
          }
        });
      }
    },

    ClosePopup() {
      this.Popup_show = false;
      clearInterval(this.Popup_timer);
    },

    cancelget() {
      // console.log("-----------------------终止请求");
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },
    
    

    //img请求照片
    imggetlist(a) {
      this.imgitems = []
      this.ajax({
        method: "GET",
        url: `/file/ftp?filename=${a}&cache=${true}`,
        responseType: "blob",
      }).then((res) => {
        console.log(res.data);
        var src = window.URL.createObjectURL(res.data);
        this.parimg = src;
        this.imgitems.push(this.parimg);
      });
    },
    
    // 筛选变色
    showDate(val) {
      if (val.indexOf(this.search) !== -1 && this.search !== "") {
        return val.replace(
          this.search,
          '<font color="#FF0000">' + this.search + "</font>"
            //  '<div background="red>'+this.search+'</div>'
        );
      } else {
        return val;
      }
    },
    loadAll() {
      return [{ value: "", address: "" }];
    },

    //分页数据列表解析方法
    Tabudataparsing() {
      this.tablelist = [];
      // console.log("------------------------", this.listdata);
      var titlelist = this.listdata[0];
      var a = titlelist[0];
      var b = titlelist[1];
      var c = titlelist[2];
      var d = titlelist[3];
      var e = titlelist[4];
      var f = titlelist[5];
      var g = titlelist[6];
      var h = titlelist[7];
      var io = titlelist[8];
      var j = titlelist[9];
      var k = titlelist[10];
      var L = titlelist[11];
      var m = titlelist[12];
      var n = titlelist[13];
      var o = titlelist[14];
      var p = titlelist[15];
      var q = titlelist[16];
      var r = titlelist[17];
      var s = titlelist[18];
      var t = titlelist[19];
      var u = titlelist[20];
      var v = titlelist[21];
      var w = titlelist[22];
      var x = titlelist[23];
      var y = titlelist[24];
      var z = titlelist[25];
      if (this.listdata[0].length == 2) {
        for (let i = 1; i < this.listdata.length; i++) {
          var objon = {};
          objon[a] = this.listdata[i][0];
          objon[b] = this.listdata[i][1];
          this.tablelist.push(objon);
        }
      } else if (this.listdata[0].length == 3) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj0 = {};
          obj0[a] = this.listdata[i][0];
          obj0[b] = this.listdata[i][1];
          obj0[c] = this.listdata[i][2];
          // obj[d] = this.bartable[i][3];
          this.tablelist.push(obj0);
        }
      } else if (this.listdata[0].length == 4) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj = {};
          obj[a] = this.listdata[i][0];
          obj[b] = this.listdata[i][1];
          obj[c] = this.listdata[i][2];
          obj[d] = this.listdata[i][3];
          this.tablelist.push(obj);
        }
      } else if (this.listdata[0].length == 5) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj1 = {};
          obj1[a] = this.listdata[i][0];
          obj1[b] = this.listdata[i][1];
          obj1[c] = this.listdata[i][2];
          obj1[d] = this.listdata[i][3];
          obj1[e] = this.listdata[i][4];
          this.tablelist.push(obj1);
        }
      } else if (this.listdata[0].length == 6) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj2 = {};
          obj2[a] = this.listdata[i][0];
          obj2[b] = this.listdata[i][1];
          obj2[c] = this.listdata[i][2];
          obj2[d] = this.listdata[i][3];
          obj2[e] = this.listdata[i][4];
          obj2[f] = this.listdata[i][5];
          this.tablelist.push(obj2);
        }
      } else if (this.listdata[0].length == 7) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj3 = {};
          obj3[a] = this.listdata[i][0];
          obj3[b] = this.listdata[i][1];
          obj3[c] = this.listdata[i][2];
          obj3[d] = this.listdata[i][3];
          obj3[e] = this.listdata[i][4];
          obj3[f] = this.listdata[i][5];
          obj3[g] = this.listdata[i][6];
          this.tablelist.push(obj3);
        }
      } else if (this.listdata[0].length == 8) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj4 = {};
          obj4[a] = this.listdata[i][0];
          obj4[b] = this.listdata[i][1];
          obj4[c] = this.listdata[i][2];
          obj4[d] = this.listdata[i][3];
          obj4[e] = this.listdata[i][4];
          obj4[f] = this.listdata[i][5];
          obj4[g] = this.listdata[i][6];
          obj4[h] = this.listdata[i][7];
          this.tablelist.push(obj4);
        }
      } else if (this.listdata[0].length == 9) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj5 = {};
          obj5[a] = this.listdata[i][0];
          obj5[b] = this.listdata[i][1];
          obj5[c] = this.listdata[i][2];
          obj5[d] = this.listdata[i][3];
          obj5[e] = this.listdata[i][4];
          obj5[f] = this.listdata[i][5];
          obj5[g] = this.listdata[i][6];
          obj5[h] = this.listdata[i][7];
          obj5[io] = this.listdata[i][8];
          this.tablelist.push(obj5);
        }
      } else if (this.listdata[0].length == 10) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj6 = {};
          obj6[a] = this.listdata[i][0];
          obj6[b] = this.listdata[i][1];
          obj6[c] = this.listdata[i][2];
          obj6[d] = this.listdata[i][3];
          obj6[e] = this.listdata[i][4];
          obj6[f] = this.listdata[i][5];
          obj6[g] = this.listdata[i][6];
          obj6[h] = this.listdata[i][7];
          obj6[io] = this.listdata[i][8];
          obj6[j] = this.listdata[i][9];
          this.tablelist.push(obj6);
        }
      } else if (this.listdata[0].length == 11) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj7 = {};
          obj7[a] = this.listdata[i][0];
          obj7[b] = this.listdata[i][1];
          obj7[c] = this.listdata[i][2];
          obj7[d] = this.listdata[i][3];
          obj7[e] = this.listdata[i][4];
          obj7[f] = this.listdata[i][5];
          obj7[g] = this.listdata[i][6];
          obj7[h] = this.listdata[i][7];
          obj7[io] = this.listdata[i][8];
          obj7[j] = this.listdata[i][9];
          obj7[k] = this.listdata[i][10];
          this.tablelist.push(obj7);
        }
      } else if (this.listdata[0].length == 12) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj8 = {};
          obj8[a] = this.listdata[i][0];
          obj8[b] = this.listdata[i][1];
          obj8[c] = this.listdata[i][2];
          obj8[d] = this.listdata[i][3];
          obj8[e] = this.listdata[i][4];
          obj8[f] = this.listdata[i][5];
          obj8[g] = this.listdata[i][6];
          obj8[h] = this.listdata[i][7];
          obj8[io] = this.listdata[i][8];
          obj8[j] = this.listdata[i][9];
          obj8[k] = this.listdata[i][10];
          obj8[L] = this.listdata[i][11];
          this.tablelist.push(obj8);
        }
      } else if (this.listdata[0].length == 13) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj9 = {};
          obj9[a] = this.listdata[i][0];
          obj9[b] = this.listdata[i][1];
          obj9[c] = this.listdata[i][2];
          obj9[d] = this.listdata[i][3];
          obj9[e] = this.listdata[i][4];
          obj9[f] = this.listdata[i][5];
          obj9[g] = this.listdata[i][6];
          obj9[h] = this.listdata[i][7];
          obj9[io] = this.listdata[i][8];
          obj9[j] = this.listdata[i][9];
          obj9[k] = this.listdata[i][10];
          obj9[L] = this.listdata[i][11];
          obj9[m] = this.listdata[i][12];
          this.tablelist.push(obj9);
        }
      } else if (this.listdata[0].length == 14) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj10 = {};
          obj10[a] = this.listdata[i][0];
          obj10[b] = this.listdata[i][1];
          obj10[c] = this.listdata[i][2];
          obj10[d] = this.listdata[i][3];
          obj10[e] = this.listdata[i][4];
          obj10[f] = this.listdata[i][5];
          obj10[g] = this.listdata[i][6];
          obj10[h] = this.listdata[i][7];
          obj10[io] = this.listdata[i][8];
          obj10[j] = this.listdata[i][9];
          obj10[k] = this.listdata[i][10];
          obj10[L] = this.listdata[i][11];
          obj10[m] = this.listdata[i][12];
          obj10[n] = this.listdata[i][13];
          this.tablelist.push(obj10);
        }
      } else if (this.listdata[0].length == 15) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj11 = {};
          obj11[a] = this.listdata[i][0];
          obj11[b] = this.listdata[i][1];
          obj11[c] = this.listdata[i][2];
          obj11[d] = this.listdata[i][3];
          obj11[e] = this.listdata[i][4];
          obj11[f] = this.listdata[i][5];
          obj11[g] = this.listdata[i][6];
          obj11[h] = this.listdata[i][7];
          obj11[io] = this.listdata[i][8];
          obj11[j] = this.listdata[i][9];
          obj11[k] = this.listdata[i][10];
          obj11[L] = this.listdata[i][11];
          obj11[m] = this.listdata[i][12];
          obj11[n] = this.listdata[i][13];
          obj11[o] = this.listdata[i][14];
          this.tablelist.push(obj11);
        }
      } else if (this.listdata[0].length == 16) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj12 = {};
          obj12[a] = this.listdata[i][0];
          obj12[b] = this.listdata[i][1];
          obj12[c] = this.listdata[i][2];
          obj12[d] = this.listdata[i][3];
          obj12[e] = this.listdata[i][4];
          obj12[f] = this.listdata[i][5];
          obj12[g] = this.listdata[i][6];
          obj12[h] = this.listdata[i][7];
          obj12[io] = this.listdata[i][8];
          obj12[j] = this.listdata[i][9];
          obj12[k] = this.listdata[i][10];
          obj12[L] = this.listdata[i][11];
          obj12[m] = this.listdata[i][12];
          obj12[n] = this.listdata[i][13];
          obj12[o] = this.listdata[i][14];
          obj12[p] = this.listdata[i][15];
          this.tablelist.push(obj12);
        }
      } else if (this.listdata[0].length == 17) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj13 = {};
          obj13[a] = this.listdata[i][0];
          obj13[b] = this.listdata[i][1];
          obj13[c] = this.listdata[i][2];
          obj13[d] = this.listdata[i][3];
          obj13[e] = this.listdata[i][4];
          obj13[f] = this.listdata[i][5];
          obj13[g] = this.listdata[i][6];
          obj13[h] = this.listdata[i][7];
          obj13[io] = this.listdata[i][8];
          obj13[j] = this.listdata[i][9];
          obj13[k] = this.listdata[i][10];
          obj13[L] = this.listdata[i][11];
          obj13[m] = this.listdata[i][12];
          obj13[n] = this.listdata[i][13];
          obj13[o] = this.listdata[i][14];
          obj13[p] = this.listdata[i][15];
          obj13[q] = this.listdata[i][16];
          this.tablelist.push(obj13);
        }
      } else if (this.listdata[0].length == 18) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj14 = {};
          obj14[a] = this.listdata[i][0];
          obj14[b] = this.listdata[i][1];
          obj14[c] = this.listdata[i][2];
          obj14[d] = this.listdata[i][3];
          obj14[e] = this.listdata[i][4];
          obj14[f] = this.listdata[i][5];
          obj14[g] = this.listdata[i][6];
          obj14[h] = this.listdata[i][7];
          obj14[io] = this.listdata[i][8];
          obj14[j] = this.listdata[i][9];
          obj14[k] = this.listdata[i][10];
          obj14[L] = this.listdata[i][11];
          obj14[m] = this.listdata[i][12];
          obj14[n] = this.listdata[i][13];
          obj14[o] = this.listdata[i][14];
          obj14[p] = this.listdata[i][15];
          obj14[q] = this.listdata[i][16];
          obj14[r] = this.listdata[i][17];
          this.tablelist.push(obj14);
        }
      } else if (this.listdata[0].length == 19) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj15 = {};
          obj15[a] = this.listdata[i][0];
          obj15[b] = this.listdata[i][1];
          obj15[c] = this.listdata[i][2];
          obj15[d] = this.listdata[i][3];
          obj15[e] = this.listdata[i][4];
          obj15[f] = this.listdata[i][5];
          obj15[g] = this.listdata[i][6];
          obj15[h] = this.listdata[i][7];
          obj15[io] = this.listdata[i][8];
          obj15[j] = this.listdata[i][9];
          obj15[k] = this.listdata[i][10];
          obj15[L] = this.listdata[i][11];
          obj15[m] = this.listdata[i][12];
          obj15[n] = this.listdata[i][13];
          obj15[o] = this.listdata[i][14];
          obj15[p] = this.listdata[i][15];
          obj15[q] = this.listdata[i][16];
          obj15[r] = this.listdata[i][17];
          obj15[s] = this.listdata[i][18];
          this.tablelist.push(obj15);
        }
      } else if (this.listdata[0].length == 20) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj16 = {};
          obj16[a] = this.listdata[i][0];
          obj16[b] = this.listdata[i][1];
          obj16[c] = this.listdata[i][2];
          obj16[d] = this.listdata[i][3];
          obj16[e] = this.listdata[i][4];
          obj16[f] = this.listdata[i][5];
          obj16[g] = this.listdata[i][6];
          obj16[h] = this.listdata[i][7];
          obj16[io] = this.listdata[i][8];
          obj16[j] = this.listdata[i][9];
          obj16[k] = this.listdata[i][10];
          obj16[L] = this.listdata[i][11];
          obj16[m] = this.listdata[i][12];
          obj16[n] = this.listdata[i][13];
          obj16[o] = this.listdata[i][14];
          obj16[p] = this.listdata[i][15];
          obj16[q] = this.listdata[i][16];
          obj16[r] = this.listdata[i][17];
          obj16[s] = this.listdata[i][18];
          obj16[t] = this.listdata[i][19];
          this.tablelist.push(obj16);
        }
      } else if (this.listdata[0].length == 21) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj17 = {};
          obj17[a] = this.listdata[i][0];
          obj17[b] = this.listdata[i][1];
          obj17[c] = this.listdata[i][2];
          obj17[d] = this.listdata[i][3];
          obj17[e] = this.listdata[i][4];
          obj17[f] = this.listdata[i][5];
          obj17[g] = this.listdata[i][6];
          obj17[h] = this.listdata[i][7];
          obj17[io] = this.listdata[i][8];
          obj17[j] = this.listdata[i][9];
          obj17[k] = this.listdata[i][10];
          obj17[L] = this.listdata[i][11];
          obj17[m] = this.listdata[i][12];
          obj17[n] = this.listdata[i][13];
          obj17[o] = this.listdata[i][14];
          obj17[p] = this.listdata[i][15];
          obj17[q] = this.listdata[i][16];
          obj17[r] = this.listdata[i][17];
          obj17[s] = this.listdata[i][18];
          obj17[t] = this.listdata[i][19];
          obj17[u] = this.listdata[i][20];
          this.tablelist.push(obj17);
        }
      } else if (this.listdata[0].length == 22) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj18 = {};
          obj18[a] = this.listdata[i][0];
          obj18[b] = this.listdata[i][1];
          obj18[c] = this.listdata[i][2];
          obj18[d] = this.listdata[i][3];
          obj18[e] = this.listdata[i][4];
          obj18[f] = this.listdata[i][5];
          obj18[g] = this.listdata[i][6];
          obj18[h] = this.listdata[i][7];
          obj18[io] = this.listdata[i][8];
          obj18[j] = this.listdata[i][9];
          obj18[k] = this.listdata[i][10];
          obj18[L] = this.listdata[i][11];
          obj18[m] = this.listdata[i][12];
          obj18[n] = this.listdata[i][13];
          obj18[o] = this.listdata[i][14];
          obj18[p] = this.listdata[i][15];
          obj18[q] = this.listdata[i][16];
          obj18[r] = this.listdata[i][17];
          obj18[s] = this.listdata[i][18];
          obj18[t] = this.listdata[i][19];
          obj18[u] = this.listdata[i][20];
          obj18[v] = this.listdata[i][21];
          this.tablelist.push(obj18);
        }
      } else if (this.listdata[0].length == 23) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj19 = {};
          obj19[a] = this.listdata[i][0];
          obj19[b] = this.listdata[i][1];
          obj19[c] = this.listdata[i][2];
          obj19[d] = this.listdata[i][3];
          obj19[e] = this.listdata[i][4];
          obj19[f] = this.listdata[i][5];
          obj19[g] = this.listdata[i][6];
          obj19[h] = this.listdata[i][7];
          obj19[io] = this.listdata[i][8];
          obj19[j] = this.listdata[i][9];
          obj19[k] = this.listdata[i][10];
          obj19[L] = this.listdata[i][11];
          obj19[m] = this.listdata[i][12];
          obj19[n] = this.listdata[i][13];
          obj19[o] = this.listdata[i][14];
          obj19[p] = this.listdata[i][15];
          obj19[q] = this.listdata[i][16];
          obj19[r] = this.listdata[i][17];
          obj19[s] = this.listdata[i][18];
          obj19[t] = this.listdata[i][19];
          obj19[u] = this.listdata[i][20];
          obj19[v] = this.listdata[i][21];
          obj19[w] = this.listdata[i][22];
          this.tablelist.push(obj19);
        }
      } else if (this.listdata[0].length == 24) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj20 = {};
          obj20[a] = this.listdata[i][0];
          obj20[b] = this.listdata[i][1];
          obj20[c] = this.listdata[i][2];
          obj20[d] = this.listdata[i][3];
          obj20[e] = this.listdata[i][4];
          obj20[f] = this.listdata[i][5];
          obj20[g] = this.listdata[i][6];
          obj20[h] = this.listdata[i][7];
          obj20[io] = this.listdata[i][8];
          obj20[j] = this.listdata[i][9];
          obj20[k] = this.listdata[i][10];
          obj20[L] = this.listdata[i][11];
          obj20[m] = this.listdata[i][12];
          obj20[n] = this.listdata[i][13];
          obj20[o] = this.listdata[i][14];
          obj20[p] = this.listdata[i][15];
          obj20[q] = this.listdata[i][16];
          obj20[r] = this.listdata[i][17];
          obj20[s] = this.listdata[i][18];
          obj20[t] = this.listdata[i][19];
          obj20[u] = this.listdata[i][20];
          obj20[v] = this.listdata[i][21];
          obj20[w] = this.listdata[i][22];
          obj20[x] = this.listdata[i][23];
          this.tablelist.push(obj20);
        }
      } else if (this.listdata[0].length == 25) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj21 = {};
          obj21[a] = this.listdata[i][0];
          obj21[b] = this.listdata[i][1];
          obj21[c] = this.listdata[i][2];
          obj21[d] = this.listdata[i][3];
          obj21[e] = this.listdata[i][4];
          obj21[f] = this.listdata[i][5];
          obj21[g] = this.listdata[i][6];
          obj21[h] = this.listdata[i][7];
          obj21[io] = this.listdata[i][8];
          obj21[j] = this.listdata[i][9];
          obj21[k] = this.listdata[i][10];
          obj21[L] = this.listdata[i][11];
          obj21[m] = this.listdata[i][12];
          obj21[n] = this.listdata[i][13];
          obj21[o] = this.listdata[i][14];
          obj21[p] = this.listdata[i][15];
          obj21[q] = this.listdata[i][16];
          obj21[r] = this.listdata[i][17];
          obj21[s] = this.listdata[i][18];
          obj21[t] = this.listdata[i][19];
          obj21[u] = this.listdata[i][20];
          obj21[v] = this.listdata[i][21];
          obj21[w] = this.listdata[i][22];
          obj21[x] = this.listdata[i][23];
          obj21[y] = this.listdata[i][24];
          this.tablelist.push(obj21);
        }
      } else if (this.listdata[0].length == 26) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj22 = {};
          obj22[a] = this.listdata[i][0];
          obj22[b] = this.listdata[i][1];
          obj22[c] = this.listdata[i][2];
          obj22[d] = this.listdata[i][3];
          obj22[e] = this.listdata[i][4];
          obj22[f] = this.listdata[i][5];
          obj22[g] = this.listdata[i][6];
          obj22[h] = this.listdata[i][7];
          obj22[io] = this.listdata[i][8];
          obj22[j] = this.listdata[i][9];
          obj22[k] = this.listdata[i][10];
          obj22[L] = this.listdata[i][11];
          obj22[m] = this.listdata[i][12];
          obj22[n] = this.listdata[i][13];
          obj22[o] = this.listdata[i][14];
          obj22[p] = this.listdata[i][15];
          obj22[q] = this.listdata[i][16];
          obj22[r] = this.listdata[i][17];
          obj22[s] = this.listdata[i][18];
          obj22[t] = this.listdata[i][19];
          obj22[u] = this.listdata[i][20];
          obj22[v] = this.listdata[i][21];
          obj22[w] = this.listdata[i][22];
          obj22[x] = this.listdata[i][23];
          obj22[y] = this.listdata[i][24];
          obj22[z] = this.listdata[i][25];
          this.tablelist.push(obj22);
        }
      }
    },

    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    /////
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    
    // 表头样式设置
      headClass () {
        return 'text-align: center;background:#696969;color:#fff'
      },
 

       // 表格样式设置
      rowClass () {
              return 'text-align: center;'
      },


  },
};
</script>

<style scoped>
.produce_content {
  width: 100%;
  background: gainsboro;
}
.produce_top {
  width: 100%;
  /* border: 1px solid #000; */
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
  background: #ffffff;
}
.table_top {
  width: 100%;
  /* border:1px solid #000; */
  background: #ffffff;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
  margin-top: 30px;
}

.produce_hader {
  width: 100%;
  /* border: 1px solid #000; */
  background: #ffffff;
  margin-top: 29px;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
}

.hader_title {
  width: 100%;
  /* border: 1px solid #000; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.hader_title div {
  font-size: 12px;
  align-items: center;
}
.s1 {
  margin-top: 1px;
  margin-right: 10px;
}
.end_btn {
  width: 160px;
  height: 30px;
  /* line-height: 30px; */
}
.hader_content {
  min-width: 1000px;
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 5px;
  display: flex;
  justify-content: space-around;
}
.hader_content_two {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.hader_content_two_left {
  width: 35%;
  margin-left: 100px;
}

.hader_left {
  width: 35%;
  display: flex;
  justify-content: space-between;
  margin-left: 100px;
}

.hader_left_img {
  width: 70%;
  height: 390px;
}

.hader_content_two_right {
  width: 60%;
  /* border: 1px solid red; */
}

.hader_content_two_right_img {
  width: 78%;
  height: 390px;
  margin-left: 10px;
}

.hader_serisn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  /* border: 1px solid blue; */
}
.hader_serisn_left {
  width: 35%;
  margin-left: 100px;
}
.hader_serisn_right {
  width: 60%;
  margin-right: 50px;
}

.hader_serisn_right_img {
  width: 85%;
  height: 390px;
  margin-left: 10px;
}
.hader_flow {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.hader_flow_left {
  width: 35%;
  margin-left: 100px;
}
.hader_flow_right {
  width: 60%;
  margin-right: 50px;
}

.hader_right {
  width: 60%;
  margin-right: 70px;
}
.hader_right_item {
  width: 120px;
  height: 120px;
  margin: 2px;
  margin-left: 10px;
}

.hader_right_img {
  width: 90%;
  height: 390px;
}
.img_type {
  width: 80%;
  height: 350px;
}

.hader_myspl {
  width: 100%;
  margin-top: 10px;
  background: #ffffff;
  box-shadow: 5px 5px 5px 5px gainsboro;
}
.hader_table {
  width: 100%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  margin-top: 10px;
  background: #ffffff;
}

/* 搜索框 */
.table_serch {
  width: 100%;
  /* min-width:1000px; */
  /* padding-top: 8px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  height: 40px;
  display: flex;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}
.el-select {
  height: 20px;
  margin-left: -6px;
}
.product {
  width: 120px;
}

#my_svg {
  width: 100%;
  height: 270px;
}

.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}
.produce_hader_img {
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 10px;
  display: flex;
}
.produce_hader_left {
  width: 40%;
}
.produce_hader_left_img {
  width: 270px;
  height: 400px;
  margin-left: 300px;
  margin-top: 10px;
}

.produce_hader_right {
  width:100%;
  /* min-width:900px; */
  /* border:1px solid #000; */
  display: flex;
  flex-wrap: wrap;
  margin-left: 150px;
  /* justify-content: space-around; */
}

.produce_hader_item_img {
  width: 90px;
  height: 90px;
  border: 1px solid gainsboro;
  margin-left: 10px;
}
.produce_table {
  width: 100%;
  /* border:1px solid #000; */
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  background: #ffffff;
  margin-top: 40px;
}

@media screen and (min-width: 1920px) {
  .produce_table {
    height: 500px;
    width: 100%;
    /* border:1px solid #000; */
    border-radius: 5px 5px 5px 5px;
    /* box-shadow: 0px 0px 0px 1.5px #c9c8c8; */
    background: #ffffff;
    margin-top: 40px;
  }
  .hader_table {
    height: 500px;
  }
}

@media screen and (min-width: 1535px) {
  .hader_table {
    height: 280px;
  }
}
</style>
